<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<!-- BEGIN HEAD -->
<head>
<meta charset="UTF-8" />
<title>登录</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<link rel="stylesheet" href="${cxt!}/ui/metrolab/assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="${cxt!}/ui/metrolab/assets/bootstrap/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="${cxt!}/ui/metrolab/assets/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="${cxt!}/ui/metrolab/css/style.css" />
<link rel="stylesheet" href="${cxt!}/ui/metrolab/css/style-responsive.css" />
<link rel="stylesheet" href="${cxt!}/ui/metrolab/css/style-default.css" id="style_color" />

<!-- start: artdialog -->
<link rel="stylesheet" href="${cxt!}/jsfile/artdialog/css/ui-dialog.css" type="text/css"/>
<!-- end: artdialog -->

<script type="text/javascript" src="${cxt!}/jsfile/jquery/jquery-1.12.4.min.js"></script>

<script type="text/javascript" src="${cxt!}/jsfile/metrolab/common/ajax.js"></script>
<script type="text/javascript" src="${cxt!}/jsfile/artdialog/dist/dialog-min.js"></script>
<script type="text/javascript" src="${cxt!}/jsfile/metrolab/common/modals.js"></script>

<!-- start: common js -->
<script type="text/javascript">
	var cxt = "${cxt!}";
</script>
<!-- end: common js -->

</head>
<!-- END HEAD -->

<!-- BEGIN BODY -->
<body class="lock">

	<div class="lock-header">
		<!-- BEGIN LOGO -->
		<a class="center" id="logo" href="${cxt!}/platform/index"> 
			JFinalUIBV3
			<% /** %>
			<img class="center" alt="logo" src="${cxt!}/ui/metrolab/img/logo.png">
			<% **/ %>
		</a>
		<!-- END LOGO -->
	</div>

	<form id="loginForm" action="${cxt!}/platform/login/vali" method="post">

		<div class="login-wrap">
			<div class="metro single-size red">
				<div class="locked">
					<i class="icon-lock"></i> <span>后台登录</span>
				</div>
			</div>

			<div class="metro double-size green">
				<div class="input-append lock-input">
					<input type="text" placeholder="账号" id="login_username"
						name="username" value="${cookieMap.userName.value!}">
				</div>
			</div>
			<div class="metro double-size yellow">
				<div class="input-append lock-input">
					<input type="password" placeholder="密码" id="login_password"
						name="password">
				</div>
			</div>
			<div class="metro double-size navy-blue">
				<div class="input-append lock-input">
					<input type="text" id="login_authCode" name="authCode"
						placeholder="验证码">
				</div>
			</div>
			<div class="metro double-size purple">
				<div class="input-append lock-input">
					<a href="javascript:void(0)" id="login_authCodeHref"
						onclick="showImage(this);">${i18nMap["admin.login.clickAuthCode"]}</a>
				</div>
			</div>
			<div class="metro single-size terques login">
				<button type="button" onclick="submitFunc();" class="btn login-btn">
					提交 <i class=" icon-long-arrow-right"></i>
				</button>
			</div>

			<% /** %>
			<div class="metro double-size navy-blue ">
				<a href="index.html" class="social-link"> <i
					class="icon-facebook-sign"></i> <span>Facebook Login</span>
				</a>
			</div>
			<div class="metro single-size deep-red">
				<a href="index.html" class="social-link"> <i
					class="icon-google-plus-sign"></i> <span>Google Login</span>
				</a>
			</div>
			<div class="metro double-size blue">
				<a href="index.html" class="social-link"> <i
					class="icon-twitter-sign"></i> <span>Twitter Login</span>
				</a>
			</div>
			<div class="metro single-size purple">
				<a href="index.html" class="social-link"> <i class="icon-skype"></i>
					<span>Skype Login</span>
				</a>
			</div>
			<% **/ %>

			<div class="login-footer">
				<div class="remember-hint pull-left">
					<input type="checkbox" id="remember" name="remember" value="1">
					记住我
				</div>
				<div class="forgot-hint pull-right">
					<a id="forget-password" class="" href="javascript:;">忘记密码？</a>
				</div>
			</div>
		</div>

	</form>

	<script type="text/javascript">

		function showImage(node) {
			var imageHtml = '<a href="javascript:void(0)" onclick="showImage(this);"><img id="yanZhengMa" src="${cxt!}/platform/authImg?rand=' + Math.random() + '" width="120" height="25"/></a>';
			$(node).replaceWith(imageHtml);
		}
		
		function submitFunc(){
			// 验证账号是否存在
			var userName = $("#login_username").val();
			if (userName == "") {
				common_modals.alert("请输入登录账号");
				return;
			}
			/* 
			var param = {"userName" : userName};
			var result = common_ajax.ajaxFunc("/platform/login/valiUserName", param);
			if(result == "true"){
				common_modals.alert("输入账号不存在");
				return;
			} 
			*/

			// 提交表单
			$("#loginForm").submit();
		}

		jQuery(document).ready(function() {
			// 初始化页面焦点
			var userName = $("#login_username");
			var passWord = $("#login_password");
			if (userName.val() == "") {
				userName.focus();
			} else if (passWord.val() == "") {
				passWord.focus();
			} else {
				$("#login_authCode").focus();
			}

			showImage($("#login_authCodeHref"));

			// 键盘回车事件
			var tds = $("html");
			tds.keydown(function(event) {
				var myEvent = event || window.event; //解决不同浏览器获取事件对象的差异
				switch (myEvent.keyCode) {
				case 13://回车事件
					submitFunc();
					break;
				}
			});
		});

	</script>

</body>
<!-- END BODY -->
</html>